/* 
路由器模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from '@/views/Login/index.vue'
// import Home from '@/views/Home/index.vue'
import Course from '@/views/Home/Course/index.vue'
import CourseItem from '@/views/Home/Course/CourseItem.vue'
import Game from '@/views/Home/Game/index.vue'
import News from '@/views/Home/News/index.vue'
const Login = () => import('@/views/Login/index.vue')
const Home = () => import('@/views/Home/index.vue')

// 安装vue-router插件
Vue.use(VueRouter)

// 创建路由器, 并配置路由表, 注册路由
const router = new VueRouter({
  mode: 'history', // hash abstract 
  // 路由表
  routes: [
    {
      path: '/login',
      component: Login,
      meta: {
        isHideFoot: true  // 标识隐藏footer
      }
    },
    {
      path: '/home',
      component: Home,
      /* 写法一: 在父路由中配置redirect */
      // redirect: '/home/course',
      children: [
        {
          name: 'Course',  // 路由的标识名称, 每个路由的name是唯一的
          path: '/home/course',  // 完整写法
          component: Course,
          children: [
            {
              name: 'CourseItem',  // 一定指定name
              path: 'item/:id/:title',  // params参数占位
              component: CourseItem,
              /* 
                ○ 对象: props: {a: 1, b: 2} => 专门指定自定义数据的
                ○ 布尔值(true): props: true => 专门将params参数映射成props
                ○ 函数: props: route => ({自定义/params/query}) => 传递自定义, params参数和query参数
              */
              // props: {a: 1, b: 2}
              // props: true
              props: route => ({c: 2, id: route.params.id, title: route.query.title2})
            }
          ]
        },
        {
          name: 'Game',
          path: 'game',  // 简写  => /home/game
          component: Game
        },
        {
          name: 'News',
          path: 'news',  // 简写  => /home/news
          component: News
        },
        /* 写法二: 配置自动跳转的子路由 */
        {
          path: '',
          redirect: '/home/course'
        }
      ]
    },
    // 自动跳转的路由
    {
      path: '/',
      redirect: '/home'
    }
  ],

  // 全局修改当前路由链接的类名
  linkActiveClass: 'active2'
})

// 保存原有的push函数
const originalPush = VueRouter.prototype.push
// 定义新的push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  console.log('push', location, onResolve, onReject)
  // 如果有成功或失败回调函数 => 使用的是老的语法, 本身就不报错 => 调用原函数就可以
  if (onResolve || onReject) {
    return originalPush.call(this, location, onResolve, onReject)
  }
  // 没有指定成功和失败回调 => 使用的是新语法, 重复跳转时就会产生失败的promise => 通过catch来指定失败的回调解决问题
  return originalPush.call(this, location).catch(() => {})
}

// 暴露路由器
export default router

